<!--
 * @Version: 1.0
 * @Date: 2021-05-28 11:08:09
 * @LastEditTime: 2021-09-23 15:30:21
 * @Description:
-->
<template>
  <div class="app-container">
    <!-- <div class="header_title_box">
      <h2>销量预计设置</h2>
    </div> -->
    <div class="select_form_box">
      <!-- 搜索 -->
      <div class="filter-container">
        <el-date-picker v-model="queryParam.year" size="small" type="year" value-format="yyyy" placeholder="选择年份" class="input-with-select mr64" @change="handleSearch" />
        <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
      </div>
      <!-- 操作按钮 -->
      <div class="operation_button_box">
        <el-button v-action="'salesForecasts@save'" size="small" type="primary" @click="handleCreateSelf">设置预计销量</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table :data="data" border fit :max-height="screenHeigh" @selection-change="handleSelectMulti">
        <!-- <el-table-column type="selection" width="51" align="center" /> -->
        <el-table-column label="操作" align="center" min-width="135">
          <template slot-scope="scope">
            <span v-action="'salesForecasts@update'" class="edit_style" style="margin: 0;" @click="handleUpdateSelf(scope.row)">编辑</span>
          </template>
        </el-table-column>
        <el-table-column label="年份" align="center" min-width="203">
          <template slot-scope="scope">
            <code-item :code="scope.row.year" @click="showInfo(scope.row.id)" />
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="created_by_name" align="center" min-width="112" />
        <el-table-column label="创建时间" prop="created_at" align="center" min-width="174" />
        <el-table-column label="修改人" prop="updated_by_name" align="center" min-width="112" />
        <el-table-column label="修改时间" prop="updated_at" align="center" min-width="174" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <sales-forecasts-info ref="info" />
  </div>
</template>

<script>
import formOperate from '../../../layout/mixin/formOperate'
import { action } from '@/directive/permission/index.js' // 权限判断指令
import codeItem from '../../../components/base/code'
import salesForecastsInfo from '../components/salesForecastsInfo'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'SalesForecasts',
  components: {
    codeItem,
    salesForecastsInfo
  },
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 380,
      queryParam: {
        year: ''
      },
      componentName: 'SalesForecasts',
      url: '/sales-forecasts', // 列表接口地址
      cachePaths: [
        '/storage/salesForecasts/edit'
      ]
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    handleCreateSelf() {
      const vm = this
      vm.$router.push({ path: '/storage/salesForecasts/edit' })
    },
    // 去设置
    handleUpdateSelf(row) {
      const vm = this
      vm.$router.push({ path: `/storage/salesForecasts/edit/${row.id}` })
    },
    showInfo(id) {
      const vm = this
      vm.$refs['info'].show(id)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
